<template>
	<view class="main_con" :style="{height:height+'px'}">
		<view class="head_main">
			<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;" @click="toback">
				<u-icon name="arrow-left" color="#333" label="召唤电梯" labelColor="#333" space="6">
				</u-icon>
			</view>
			<view class="u-flex u-row-between" style="color:#00828a;padding:20rpx;">
				<view>
					<view class="dis_inl_blo va_m">
						<u-avatar :src="users.avatar" size="40"></u-avatar>
					</view>
					<text class="va_m" style="font-size: 32rpx;font-weight: bold;margin-left:15rpx;">{{users.username}}</text>
				</view>
				<view>龍舟一号院1号楼一单元客梯</view>
			</view>
			<view class="key_con">
				<image :src="keyimg" mode="widthFix"></image>
				
			</view>
			<view class="bottom_btn" @click="toclick">
				一键召唤电梯
			</view>
		</view>
		
		
		<view class="bottom_con" @click="toopendoorlist">点击查看召唤电梯记录</view>
	</view>
</template>

<script>
	export default {
		
		data () {
			return {
				height:0,
				users:{
					avatar:'https://resourse.cnlhjt.com/upload/20220825/9fcd7669f37b921409d34469b189f623.png',
					username:'张三'
				},
				keyimg:'https://resourse.cnlhjt.com/upload/20221009/5045e910d46cbb2bfc4b72c963614c4c.png',
				isactive:false
			}
		},
		mounted() {
			this.systemInfo();
		},
		onLoad() {
			
		},
		methods:{
		
			systemInfo(){
				var that=this;
				uni.getSystemInfo({
					success(res) {
						// console.log(res);
						that.height=res.screenHeight
					}
				})
			},
			// todownkey(){
			// 	this.isactive=true
			// },
			toclick(){
				var that=this;
				
				that.keyimg='https://resourse.cnlhjt.com/upload/20221009/92e7fd026c0f27aebfdc1dbedeb887a9.gif';
				// setTimeout(function(){
				// 	that.isactive=false;
				// 	that.keyimg='https://resourse.cnlhjt.com/upload/20221009/5045e910d46cbb2bfc4b72c963614c4c.png';
				// },3000)
			},
			toback(){
				uni.navigateBack()
			},
			toopendoorlist(){
				uni.navigateTo({
					url:'./summonList'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main_con{
		background-color: #fff;
	}
	.head_main{
		width:100%;
		height:70%;
		background-image: url('https://resourse.cnlhjt.com/upload/20221009/c17b958f4130adfd8df74739f6467248.png');
		background-size: 100% 100%;
		background-position: center center;
	}
	.key_con{
		text-align: center;
		image{
			margin-top:275rpx;
			width:220rpx;
		}
	}
	.bottom_con{
		position: fixed;
		bottom:40rpx;
		width:100%;
		color:#00828A;
		text-align: center;
	}
	.bottom_btn{
		position: fixed;
		top:60%;
		left:10%;
		width:80%;
		height:100rpx;
		line-height: 100rpx;
		color:#fff;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		background-color: #00828A;
		border-radius: 50rpx;
	}
	
</style>